<!--{include header.htm}-->

<style>
#ul1 {width: 400px; padding: 0px; margin: 0px;}
#ul1 li{width: 400px; height: 30px; line-height: 30px; overflow: hidden; padding: 0px; margin: 0px; display: block; border: 1px solid #BB0000; background: #EE9999; margin-bottom: 5px;}
</style>
<div class="width">
	<ul id="ul1">
		<li id="li_1"><a href="http://www.baidu.com/">AAAAAA-11</a></li>
		<li id="li_2"><a href="http://www.baidu.com/">BBBBBB-11</a></li>
		<li id="li_3"><a href="http://www.baidu.com/">CCCCCC-11</a></li>
		<li id="li_4"><a href="http://www.baidu.com/">DDDDDD-11</a></li>
		<li id="li_5"><a href="http://www.baidu.com/">EEEEE-11</a></li>
		
		<li  id="li_6">AAAAAA-22</li>
		<li id="li_7">BBBBBB-22</li>
		<li id="li_8">CCCCCC-22</li>
		<li id="li_9">DDDDDD-22</li>
		<li id="li_10">EEEEEE-22</li>
	</ul>
	
	<input type="button" id="button1" value="aaaaa" />
	
</div>

<!--{include footer.htm}-->
<script type="text/javascript" src="view/js/jquery.dragsort-0.5.1.min.js"></script>
<script type="text/javascript">
	$("#ul1").dragsort({dragEnd: function(s) {
		var data = $("#ul1 li").map(function() { return $(this).children().html(); }).get();
		var s = data.join("|");
		alert(s);
	}});
</script>

</body>
</html>